import React, { Component } from 'react'
import { Card } from 'antd'
import ReactEcharts from 'echarts-for-react'
import TypeStyle from './type.module.scss'
export default class Type extends Component {
  state = {
    option: {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        boundaryGap: false,
      },
      yAxis: {
        type: 'value',
        splitLine: {
          show: false
        },
      },
      series: [
        {
          data: [0, 130, 124, 248, 35, 247, 60],
          type: 'line',
          showSymbol: false,
          smooth: true,
          lineStyle: {
            color: '#ff6700',
            shadowColor: 'rgba(255,103,0,0.15)',
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowBlur: 1
          }
        },
        {
          data: [0, 300, 0, 300, 0, 300, 0],
          type: 'bar',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: 'rgba(255,103,0,0.1)' // 0% 处的颜色
              }, 
              {
                offset: 0.7, color: 'rgba(255,103,0,0.05)' // 0% 处的颜色
              }, 
              {
                  offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        }
      ]
    }
  }
  render() {
    return (
      <Card className={`${TypeStyle.card}`} title="月销售额" size='small'>
        <ReactEcharts className={Type.echarts} option={this.state.option}></ReactEcharts>
      </Card>
    )
  }
}
